﻿@page
@{
    Layout = "_Layout";
}
@section Styles {
    <style>
        .el-table__body td div {
            white-space: nowrap !important; /* 保持文字在同一行 */
            overflow: hidden; /* 控制内容超出部分隐藏 */
            text-overflow: ellipsis; /* 使用省略号表示被隐藏的内容 */
        }
    </style>
}
<el-row>
    <el-col span="8"><el-button type="primary" v-on:click.stop="addModel">新增</el-button></el-col>
    @* <el-col span="8"><el-button type="primary" v-on:click.stop="apiGetFieldAll">刷新字段</el-button></el-col> *@
    <el-col span="8"><el-button type="success" v-on:click.stop="addField">添加字段</el-button></el-col>
</el-row>


<!-- 表格 -->
<el-table stripe show-overflow-tooltip
border
show-index 
style="width: 100%"
          :data="tableData">
    <!-- 列定义 -->
    @*<el-table-column prop="id" label="ID"></el-table-column>*@
    <el-table-column type="index"></el-table-column>
    <el-table-column resizable prop="dutyDate" label="值班时间" width="130"></el-table-column>
    <el-table-column resizable prop="dutyLeader" label="带班领导" width="150"></el-table-column>
    <el-table-column resizable prop="dutyCadre" label="值班干部" width="150"></el-table-column>

    <el-table-column resizable v-for="item in columns" :prop="item.prop" :label="item.label" width="150"></el-table-column>

    <el-table-column resizable prop="createdDate" label="创建时间" width="150"></el-table-column>
    <el-table-column label="操作" fixed="right" width="130">
        <template slot-scope="scope">
            <el-link :underline="false"
                     style="margin-right: 5px;"
                     v-on:click="editModel(scope.row)"
                     type="primary">
                编 辑
            </el-link>
            <el-link :underline="false"
                     type="danger"
                     v-on:click="delModel(scope.row)">
                删 除
            </el-link>
        </template>
    </el-table-column>
</el-table>

<!-- 分页器 -->
<el-pagination @@size-change="handleSizeChange"
               @@current-change="handleCurrentChange"
               :current-page="page.currentPage"
               :page-sizes="[50,100,200,300,400]"
               :page-size="page.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="page.total"></el-pagination>

<!-- 表单编辑 -->
<el-dialog :title="formTitle"
           :visible.sync="formVisible"
           destroy-on-close
           close-on-click-modal="false"
           width="60%"
           :before-close="formClose">


    <el-form ref="form" :model="model" :rules="rules"  label-width="180px">

        <el-form-item label="值班时间" prop="dutyDate">
            <el-date-picker v-model="model.dutyDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
            </el-date-picker>
        </el-form-item>        
        <el-form-item label="带班领导">
            <el-input v-model="model.dutyLeader"></el-input>
        </el-form-item>
        <el-form-item label="值班干部">
            <el-input v-model="model.dutyCadre"></el-input>
        </el-form-item>


        <el-form-item v-for="item in columns" :label="item.label" >
            <el-input v-model="model[item.prop]"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @@click="onSubmit">提交</el-button>
            <el-button @@click="formClose">取消</el-button>
        </el-form-item>

    </el-form>
</el-dialog>




<!-- 自定义虚拟字段编辑 -->
<el-dialog title="自定义虚拟字段编辑"
           :visible.sync="fieldVisble"
           destroy-on-close
           close-on-click-modal="false"
           width="70%"
           :before-close="fieldClose">

    <el-row>
        <el-col :span="6">
            <el-button type="primary" v-on:click.stop="addRow">新增</el-button>
        </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table stripe show-index show-overflow-tooltip style="width: 100%"
              :data="fieldTable">
        <el-table-column type="index"></el-table-column>
        
        <el-table-column property="fieldName" label="字段显示名称">
            <template slot-scope="{row}">
                <el-input v-if="row.$isEdit" maxlength="50" v-model="row.fieldName"></el-input>
                <el-label v-else="row.$isEdit">{{row.fieldName}}</el-label>
            </template>
        </el-table-column>
        <el-table-column property="fieldKey" label="字段属性名称">
            <template slot-scope="{row}">
                <el-input v-if="row.$isEdit" maxlength="50" v-model="row.fieldKey"></el-input>
                <el-label v-else="row.$isEdit">{{row.fieldKey}}</el-label>
            </template>
        </el-table-column>        
        <el-table-column prop="sort" label="排序">
            <template slot-scope="{row}">
                <el-input v-if="row.$isEdit" type="number" maxlength="9" v-model="row.sort"></el-input>
                <el-label v-else="row.$isEdit">{{row.sort}}</el-label>
            </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
            <template slot-scope="scope">
                <el-link v-if="scope.row.$isEdit"
                         :underline="false"
                         style="margin-right: 5px;"
                         v-on:click="saveField(scope.row)"
                         type="primary">
                    保 存
                </el-link>

                <el-link v-else
                         :underline="false"
                         style="margin-right: 5px;"
                         v-on:click="editField(scope.row)"
                         type="primary">
                    编 辑
                </el-link>
                <el-link :underline="false"
                         type="danger"
                         v-on:click="delField(scope)">
                    删 除
                </el-link>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination @@size-change="fieldSizeChange"
                   @@current-change="fieldCurrentChange"
                   :current-page="fieldPage.currentPage"
                   :page-sizes="[30,50,100]"
                   :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="page.total"></el-pagination>

    </el-col>

</el-dialog>
@section Scripts {
    <script src="setting.js" type="text/javascript"> </script>
}